<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .box {
      /*开启了flex布局的元素叫flex container，flex container里面的直接子元素叫flex item*/
      /*开启flex布局(flex: flex container以块级元素存在  inline-flex: flex container以行内元素存在)*/
      display: flex;
      width: 500px;
      height: 500px;
      background-color: #f00;
    }

    /*
    应用在flex container上的css属性
    flex-flow
    flex-direction
    flex-wrap
    justify-content
    align-items
    align-content
    */

    /*
    应用在flex item上的css属性
    flex
    flex-grow
    flex-basis
    flex-shrink
    order
    align-self
    */
  </style>
</head>
<body>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <strong>strong元素</strong>
</body>
</html>